<template>
	<div id="container" :data="data">
		<chartTitle :title="title"></chartTitle>
		<div class="main" :id="id">

		</div>
	</div>
</template>

<script>
	import * as echarts from 'echarts';
  import autoSize from '../../uitils/auto-font-size.js'
  import chartTitle from '../chart-title/index.vue'
	export default {
    components: {
      chartTitle
    },
		name: 'chart-pie',
		props: {
			title: String,
			shadow: {
				type: Boolean,
				default: true
			},
			color: {
				type: Array,
				default: () => {
					return ['#00CBFF', '#D33C36', '#FF6600', '#F4CD28', '#00B67C', '#A3D804']
				}
			},
      data: {
      	type: Array,
      	default: () => {
      		return []
      	}
      }
		},
		data() {
			return {
				minAngle: 0,
				center: ['50%', '55%']
			}
		},
		computed: {
			id: function() {
				return `main-${Math.random()}`
			}
		},
		mounted() {
		  setTimeout(() => {
		    this.onInit()
		  }, 3500)
		},
		updated() {
		  setTimeout(() => {
		    this.onInit()
		  }, 1000)
		},
		methods: {
      fontSize(val, initWidth = 1920){
        
        let nowClientWidth = document.documentElement.clientWidth;
      	return val * (nowClientWidth/initWidth);
      },
			onInit() {
				var chartDom = document.getElementById(this.id);
				var myChart = echarts.init(chartDom);
				var option;
        
        const containerWidth = document.getElementById('container').offsetWidth
        const length2Width = (containerWidth - (containerWidth * 0.6)) / 1.6

				option = {
          animationDuration: 4000,
          animationDurationUpdate: 2000,
					tooltip: {
						show: true,
						formatter: function(params) {
							
							const { data, color } = params
							const icon = `<span style="display: inline-block;width:10px;height: 10px;background-color: ${color};border-radius: 50%;margin-right: 5px"></span>`
							const name = `<span style="color: ${color};">${data.name}</span>`
							const value = ` / ${data.value}%`
							return icon + name + value
							// return `<span style="width:10px;height: 10px;background-color: ${params.color}"></span>`
						}
					},
					color: this.color,
					legend: {
						show: false,
						orient: 'vertical',
            selectedMode: false,
						top: 'middle',
						right: "5%",
						textStyle: {
							color: '#f2f2f2',
							fontSize: 25,

						},
						icon: 'roundRect'
					},
					series: [
						// 主要展示层的
						{
							radius: [0, '60%'],
							center: this.center,
							type: 'pie',
							itemStyle: {
								opacity: 0.8
							},
							emphasis: {
								itemStyle: {
									opacity: 1
								}
							},
							minAngle: this.minAngle,
							label: {
								formatter: params => {
									let name = params.name
									if(name.length > 6) {
										name = name.substring(0, 5) + '\n' + name.substring(5, -1)
									}
                  if(params.data.value === 0) {
                    params.data.label = {
                      show: false
                    }
                    params.data.labelLine = {
                      show: false
                    }
                  }
									return `{text|▋${name}}{percent| / ${params.value || 0}%}`
								},
                // width: -autoSize(115),
                // height:  40,
                // padding: [0, -autoSize(115)],
                fontSize: autoSize(14),
								// padding: [0, -130, 30, -length2Width - 10],
								rich: {
									percent: {
                    fontSize: autoSize(14),
										color: '#fff',
									}
								}
							},
							labelLine: {
								show: false,
								lineStyle: {
									type: 'dashed'
								},
								normal: {
									// length: 12,
									// length2: length2Width,
									// length2: autoSize(115),
                  align: 'left',
									lineStyle: {
										color: '#e6e6e6',
                    type: 'dashed'
									}
								}
							},
							data: this.data
						},
						// 边框的设置
						{
							radius: ['63%', '59%'],
							center: this.center,
							type: 'pie',
							minAngle: this.minAngle,
							emphasis: {
								scale: false
							},
							label: {
								show: false
							},
							data: this.data,
						},
						// 圆心
						{
							radius: ['0', '12%'],
							center: this.center,
							type: 'pie',
							color: '#C2D7FD',
							minAngle: 30,
							emphasis: {
								scale: false
							},
							label: {
								show: false
							},
							hoverAnimation:false,
							tooltip: {
								show: false
							},
							z: 5,
							itemStyle: {
								shadowColor: '#000',
								shadowBlur: 30
							},
							data: [{value: 0}],
						},
						// 圆心外圈
						{
							radius: ['20%', '19%'],
							center: this.center,
							type: 'pie',
							color: '#C2D7FD',
							minAngle: 30,
							emphasis: {
								scale: false
							},
							label: {
								show: false
							},
							hoverAnimation:false,
							tooltip: {
								show: false
							},
							itemStyle: {
								shadowColor: '#000',
								shadowBlur: 10
							},
							z: 5,
							data: [{value: 0}],
						},
					]
				};

				myChart.setOption(option, true)
				window.addEventListener('resize', () => {
					myChart.resize()
				})
			}
		}
	}
</script>

<style lang="less" scoped>
  @keyframes lineMove{
     0%{width: 0;}
     100%{width: 90%;}
  }

  #container {
    width: 100%;
    height: 27.4vh;
    color: #fff;
    background-color: rgba(7, 38, 46, .2);
    border: 1px solid rgba(194, 215, 253, .2);
    display: flex;
    flex-flow: column;

    .main {
      flex: 1;
    }
  }
</style>
